<template>
  <view class="usersetupname">
    <statusBar></statusBar>
    <uni-nav-bar left-icon="back" title="用户名"></uni-nav-bar>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    <input type="text" v-model="userName" />
    <view class="tishi">最多20个字符，可用中英文、数字组成。</view>

    <button @click="confirmName">确定</button>

    <uni-popup :show="type === 'middle'" position="middle" mode="fixed" :msg="msg" @hidePopup="togglePopup('')"></uni-popup>
  </view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import statusBar from "@/components/status-bar.vue"
export default {
  components: {
    uniPopup,
    statusBar
  },
  data() {
    return {
      type: '',
      userName: '',
      userInfo: [],
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo: function() {
      uni.request({
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/personal/GetUserInfo',
        data: {},
        success: res => {
          if (res.statusCode == 200) {
            this.userInfo = res.data.data;
          } else {
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    confirmName: function() {
      uni.request({
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/personal/SubmitUser', 
        data: {
          UserName: this.userName,
          Description: this.userInfo.Description,
          Sex: this.userInfo.Sex,
          Birthday: this.userInfo.Birthday,
        },
        success: res => {
          if(res.statusCode == 200){
            this.msg = '修改成功';
            this.togglePopup('middle');
          }else{
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.line {
  height: 15upx;
}
.usersetupname button {
  width: 700upx;
  height: 88upx;
  background-color: #27b28b;
  border: none;
  padding: 0;
  color: #ffffff;
}
.usersetupname input {
  width: 670upx;
  height: 80upx;
  padding-left: 30upx;
  line-height: 80upx;
  background-color: #ffffff;
  border: 1px solid #27b28b;
  border-radius: 3px;
  display: block;
  margin: 50upx auto 0 auto;
}
.usersetupname .tishi {
  font-size: 12px;
  color: #898989;
  text-align: center;
  padding: 10upx 0 40upx 0;
}
</style>
